<template>
<div>
  <div>
    <div v-if="according">
      <van-empty description="请稍等" />
    </div>
    <div v-else>
      <div v-for="(item,index) in list" :key="index" style="margin-bottom: 20px">
        <router-link :to="{path:'/detail',query:{categoryId:item.articleId,articleId:item.categoryId}}">
          <div style="overflow: hidden;width: 100%;margin-bottom: 20px">
            <div style="float: left;margin-right: 10px" >
              <div >
                <img :src="item.coverImgUrl" alt="" style="width: 150px;height: 100px">
              </div>
            </div>
            <div style="float: left;width: calc(100% - 160px);height: 100px">
              <span v-html="item.title" style="display: block;color: black"></span>
              <div style="margin-top: 20px">
                <span v-html="item.articleSource" style="font-size: 10px;margin-right: 10px;color: black"></span>
                <span v-html="item.sendTime" style="font-size: 10px;color: black"></span>
              </div>
            </div>
          </div>
          <!--    <span v-html="item.sendTime"></span>-->
        </router-link>
      </div>
      <van-pagination v-model="currentPage" :page-count="total" mode="simple" @change="changeOne" class="van-back"/>
    </div>
  </div>
  </div>
</template>
<script>
import {news} from "@/api/http";
// console.log(333333)
export default {
name: "new",
  data(){
    return {
      title:'',
      list:[],
      // zan:""
      winScrollTop:'',
      winScrollTwo:'',
      total:0,
      currentPage:1,
      according:true,
      timer:'',
      listTwo:[{pageNum:1},{pageNum:1},{pageNum:1},{pageNum:1},
        {pageNum:1},{pageNum:1},{pageNum:1},{pageNum:1},{pageNum:1},{pageNum:1}],
      // undefined: undefined


    }
  },
props:{
  tonewOne:{
    type:[String,Number],
    default:'1'
  }
},
  methods:{
  play(){
    this.winScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // console.log(this.winScrollTop)
    // console.log( document.body.scrollTop)
    // this.winScrollTop -= 5
    if(document.documentElement.scrollTop == 0) {
      document.body.scrollTop=0
      if ( document.body.scrollTop <= 0) {
        clearInterval(this.timer)
      }
    }else {
      document.documentElement.scrollTop =0
      if (document.documentElement.scrollTop <= 0) {
        clearInterval(this.timer)
      }
    }
  },
    changeOne(){
    this.listTwo[this.tonewOne-1].pageNum = this.currentPage
      console.log(this.currentPage)
      localStorage.setItem('change',JSON.stringify(this.listTwo))
      // console.log(1111111)
      news(this.currentPage,10,this.tonewOne).then(res=>{
        console.log(res)
        this.list = res.rows
        if(res.code == 0){
          this.according = false
        }else {
          this.according = true
        }
      });
      this.timer = setInterval(this.play,1);
    },
  },
  created() {
    console.log(localStorage.getItem('change'))
    this.listTwo = localStorage.change == undefined?this.listTwo:JSON.parse(localStorage.change)
    this.currentPage = localStorage.change == undefined?1:Number(JSON.parse(localStorage.change)[this.tonewOne-1].pageNum)
    news(1,10,this.tonewOne).then(res=>{
      console.log(res)
      this.list = res.rows
      this.list = res.rows
      this.total = Math.ceil(res.total/10)
      if(res.code == 0 ){
        this.according = false
      }
    })
  },
}

</script>

<style scoped lang="less">
/deep/.van-pagination--simple {
  border-radius: 10px;
  //background-color: black;
}
/dep/.van-hairline {
  border:none
}
/deep/.van-back {
  border-radius: 20px;
}
</style>